<script setup>

import {ref} from "vue";
import {ElMessage} from "element-plus";
import {addPublicityService, getPublicityListService, removePublicityService} from "@/api/modules/publicity.js";

const queryParams = ref({
  page: 1,
  size: 10
})
const total = ref(0)
const publicityList = ref([])

const addModel = ref({
  content: ''
})
const handleAdd = async () => {
  addModel.value.content = addModel.value.content.trim()
  if (!addModel.value.content) {
    ElMessage.error('公告内容不能为空')
    return
  }
  await addPublicityService(addModel.value)
  await getPublicityList()
}

const handleRemove = async (id) => {
  console.log('删除--id', id)
  await removePublicityService(id)
  await getPublicityList()
}

const handleSizeChange = async (event) => {
  queryParams.value.size = event
  await getPublicityList()
}

const handlePageChange = async (event) => {
  queryParams.value.page = event
  await getPublicityList()
}

const getPublicityList = async () => {
  const res = await getPublicityListService(queryParams.value)
  publicityList.value = res.records
  total.value = res.total
}

getPublicityList()
</script>

<template>
  <!--  表格展示-->
  <el-card>
    <template #header>
      <div class="header">
        <el-input class="input" placeholder="请填写公告内容" v-model="addModel.content" clearable
                  @keyup.enter="handleAdd" v-hasPerm="'biz:publicity:dml'"></el-input>
        <el-button class="btn" @click="handleAdd" type="success" v-hasPerm="'biz:publicity:dml'">添加公告</el-button>
      </div>
    </template>
    <el-table :data="publicityList" style="width: 100%">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="content" label="公告" width="400"/>
      <el-table-column prop="createTime" label="创建时间" sortable width="200"/>
      <el-table-column label="操作" v-hasPerm="'biz:publicity:dql'">
        <template #default="{row}">
          <el-popconfirm title="你确定删除吗？" @confirm="handleRemove(row.id)">
            <template #reference>
              <el-link type="danger">删除</el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.size"
        :page-sizes="[5,10,15,20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
    />
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  padding: 0;
  height: 100%;

  :deep .el-card__header {
    height: 50px;
    padding: 10px;
  }

  :deep .el-card__body {
    height: calc(100% - 120px);
    padding: 10px;
  }
  :deep .el-card__footer {
    height: 50px;
    padding: 10px;
  }
  .el-table {
    height: calc(100%);
  }
}


.header {
  display: flex;

  .input {
    width: 30%;
    margin-right: 20px;
  }
}
</style>
